<template>
    <ac-layout>
        <ac-navbar slot="navbar" title="CheckBox">
            <router-link to="/cr" slot="left">
                <ac-navbar-back-icon></ac-navbar-back-icon>
            </router-link>
        </ac-navbar>

        <ac-cell-group class="demo-small-pitch">
            <div class="ac-cell-title">单独使用 - {{checkbox1}}</div>
            <ac-cell-item>
                <ac-checkbox v-model="checkbox1" slot="left">啦啦啦啦</ac-checkbox>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group class="demo-small-pitch">
            <div class="ac-cell-title">true-value & false-value - {{checkbox2}}</div>
            <ac-cell-item>
                <ac-checkbox v-model="checkbox2" slot="left" true-value="aaa" false-value="bbb">啦啦啦啦</ac-checkbox>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group class="demo-small-pitch">
            <div class="ac-cell-title">值和标签一致 -> {{checkbox3}}</div>
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox3" slot="left">
                    <ac-checkbox val="啦啦啦"></ac-checkbox>
                    <ac-checkbox val="啊啊啊"></ac-checkbox>
                    <ac-checkbox val="喔喔喔"></ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group class="demo-small-pitch">
            <div class="ac-cell-title">值和标签不同 -> {{checkbox4}}</div>
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox4" slot="left">
                    <ac-checkbox val="1">啦啦啦</ac-checkbox>
                    <ac-checkbox val="2">啊啊啊</ac-checkbox>
                    <ac-checkbox val="3">喔喔喔</ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>



        <ac-cell-group title="禁用">
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox5" slot="left">
                    <ac-checkbox val="1">啦啦啦</ac-checkbox>
                    <ac-checkbox val="2" disabled>啊啊啊</ac-checkbox>
                    <ac-checkbox val="3" disabled>喔喔喔</ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group title="自定义图标颜色">
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox6" slot="left" color="#F00">
                    <ac-checkbox val="1">啦啦啦</ac-checkbox>
                    <ac-checkbox val="2">啊啊啊</ac-checkbox>
                    <ac-checkbox val="3">喔喔喔</ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group title="圆形图标">
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox7" slot="left">
                    <ac-checkbox val="1" shape="circle">啦啦啦</ac-checkbox>
                    <ac-checkbox val="2" shape="circle">啊啊啊</ac-checkbox>
                    <ac-checkbox val="3" shape="circle">喔喔喔</ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>

        <ac-cell-group title="自定义图标大小">
            <ac-cell-item>
                <ac-checkbox-group v-model="checkbox8" slot="left" size="30">
                    <ac-checkbox val="1"><span style="font-size: 24px;">男</span></ac-checkbox>
                    <ac-checkbox val="2"><span style="font-size: 24px;">女</span></ac-checkbox>
                    <ac-checkbox val="3"><span style="font-size: 24px;">未知</span></ac-checkbox>
                </ac-checkbox-group>
            </ac-cell-item>
        </ac-cell-group>
    </ac-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                checkbox1: true,
                checkbox2: 'aaa',
                checkbox3: [],
                checkbox4: ["2"],
                checkbox5: ["1"],
                checkbox6: ["1"],
                checkbox7: ["3"],
                checkbox8: ["3"],
            }
        }
    }
</script>
